<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
    <!-- shift alt  向上的键   复制一行 -->
    <!--  当页面小于等于768px 执行此样式文件-->
    <link rel="stylesheet" media="screen and (max-width:768px)" href="/css/mobile.css">
    <!--  当页面宽度大于等于1100px 执行此样式文件-->
    <link rel="stylesheet" media="screen and (min-width:1100px)" href="/css/widescreen.css">
    <!-- 引入字体图标库 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css" rel="stylesheet">
    <title>米修在线 |前端在线学习平台</title>
</head>

<body>
    <nav id="navbar">
        <h1>
            <span class="text-primary">
                <i class="fas fa-book-open"></i>
            </span>
            米修在线
        </h1>
        <ul>
            <li><a href="/#home">Home</a></li>
            <li><a href="/#what">What</a></li>
            <li><a href="/#who">Who</a></li>
            <li><a href="/#contact">Contact</a></li>
        </ul>
    </nav>
    <!-- header -->
    <header id="home">
        <div class="home-content">
            <h1 class="l-heading">
                欢迎来到米修在线
            </h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur suscipit quisquam rem omnis
                necessitatibus dolorem.
            </p>
            <a href="#what" class="btn">阅读更多</a>
        </div>
    </header>
    <section id="what" class="bg-light py-1">
        <div class="container">
            <h2 class="m-heading text-center">
                <span class="text-primary">
                    What
                </span>
                We Do
            </h2>
            <div class="items">
                <div class="item">
                    <i class="fas fa-university fa-2x"></i>
                    <div>
                        <h3>前端基础课程</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa recusandae repellendus, cum
                            impedit harum veniam.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <i class="fas fa-book-reader fa-2x"></i>
                    <div>
                        <h3>前端进阶课程</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa recusandae repellendus, cum
                            impedit harum veniam.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <i class="fas fa-pencil-alt fa-2x"></i>
                    <div>
                        <h3>前端高级课程</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa recusandae repellendus, cum
                            impedit harum veniam.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="who">
        <div class="who-img"></div>
        <div class="who-text bg-dark p-1">
            <h2 class="m-heading">
                <span class="text-primary">
                    Who
                </span>
                We Are
            </h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi facilis, consectetur recusandae velit
                itaque sit, necessitatibus saepe quia, voluptas voluptatem autem quod eius? Omnis dolorem, qui
                reprehenderit quae nobis error!
            </p>
            <h3>OursTeam</h3>
            <ul class="list">
                <li>Mark Smith: CEO</li>
                <li>Shannon Johnson: CFO</li>
                <li>John Corbit: Lead Accountant</li>
                <li>Janet Williams: Investment Manager</li>
                <li>Kara Jackson: Senior Accountant</li>
            </ul>
        </div>
    </section>
    <!-- clients -->
    <section id="clients" class="py-1">
        <div class="container">
            <h2 class="m-heading text-center">
                <span class="text-primary">
                    Our
                </span>
                Clients
            </h2>
            <div class="items py-1">
                <div>
                    <img src="./img/logos/logo1.png" alt="clients">
                </div>
                <div>
                    <img src="./img/logos/logo2.png" alt="clients">
                </div>
                <div>
                    <img src="./img/logos/logo3.png" alt="clients">
                </div>
                <div>
                    <img src="./img/logos/logo4.png" alt="clients">
                </div>
                <div>
                    <img src="./img/logos/logo5.png" alt="clients">
                </div>
            </div>
        </div>
    </section>
    <!-- contact -->
    <section id="contact">
        <div class="contact-form p-2 bg-primary">
            <h3>Contact Us</h3>
            <p>如有疑问请填写以下信息联系我们</p>
            <form>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" name="email" id="email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="name">电话</label>
                    <input type="text" name="name" id="name" placeholder="请输入电话">
                </div>
                <div class="form-group">
                    <label for="name">反馈信息</label>
                    <textarea type="text" name="name" id="name" placeholder="请输入反馈信息"></textarea>
                </div>

            </form>
            <input class="btn bg-dark" type="submit" value="提交" />
        </div>
        <div class="contact-img">

        </div>
    </section>
    <!-- footer -->
    <footer id="main-footer" class="bg-dark text-center p-1">
        <div class="container">
            <p>
                Copyright &copy;2021,米修在线,ALl Rights Reserved
            </p>
        </div>
    </footer>
</body>

</html>